/**
 * Created by user on 2016/11/7.
 */
import React from 'react';
import { Row, Col, Button, Form, Input, Message,Modal ,Icon} from 'antd';
const createForm = Form.create;
const ForItem = Form.Item;


let PassWord = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      mobilePhone: '',
      password: '',
      rePassword: '',
      validCode: '',
    }
  },
  handleSubmit(e){
    let me = this;
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        return;
      }
      var params = this.props.form.getFieldsValue();
      params.nid = 'updatePwd';
      console.log(params);
      Utils.sendAjax({
        url: '/user/updatePwd',
        data: JSON.stringify(params),
        method: 'post',
        callback: (result) => {
          if (result.code === '200') {
            Message.success(result.message);
            setTimeout(()=> {
              me.context.router.push('/login')
            }, 500);
          } else {
            Message.error(result.message, 10)
          }
        }
      })
    })
  },

  handleReturn() {
    let goPathUrl = '/';
    this.context.router.push(goPathUrl);
  },

  validCode() {
    var img = document.getElementById("Img");
    img.src = Utils.apiServer + "/validImg?rnd=" + Math.random();
  },

  handleValide() {
    let params = this.props.form.getFieldsValue();
    params.nid = "updatePwd";
    Utils.sendAjax({
      url: '/message/sms/send',
      data: JSON.stringify(params),
      method: 'post',
      callback: (result) => {
        if (result.code === '200') {
          Message.success(result.message)
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  render() {
    const { getFieldProps } = this.props.form;
    const mobilePhoneProps = getFieldProps('mobilePhone', {
      rules: [
        {required: true, message: '手机号码不能为空'},
        {validator: Utils.phone}
      ]
    });

    const passwordProps = getFieldProps('password', {
      rules: [
        {required: true, message: '新密码不能为空'},
        {validator: Utils.password}
      ]
    });
    const confirmPwdProps = getFieldProps('confirmPwd', {
      rules: [
        {required: true, message: '密码不能为空'},
        {
          validator: function (rule, value, callback) {
            if (!value) {
              value = '';
            }
            let password = getFieldProps('password').value;
            console.log(getFieldProps('password'));
            console.log(value);
            if (!!value && value == password) {
              callback();
            } else {
              callback('密码不一致');
            }
          }
        }
      ]
    });
    const phoneCodeProps = getFieldProps('phoneCode', {
      rules: [
        {required: true, message: '验证码不能为空'},
        {validator: Utils.phoneCode}
      ]
    });
    const validCodeProps = getFieldProps('validCode', {
      rules: [
        {required: true, message: '请输入图形验证码'},
        {validator: Utils.phoneCode}
      ],
      onChange: (e) => {
        this.setState({validCode: e.target.value});
        console.log(e.target.value);
      },
    });
    return (
      <div className="forget">
        <div className="forget-title">
          <img src={require('../../.././src/assets/img/logo.png')} style={{marginTop: 7}}/>
          <p>找回密码</p>
        </div>
        <div className="forgetPassword">
          <section>
            <Form horizontal form={this.props.form}>
              <ForItem>
                <Icon type="user"/>
                <Input placeholder="请输入您的手机号" className="ipt" {...mobilePhoneProps}/>
              </ForItem>
              <ForItem className="validCode">
                <Icon type="file-jpg"/>
                <Input placeholder="请输入图片验证码" {...validCodeProps} value={this.state.validCode}/>
                <img id='Img' src={`${Utils.apiServer}/validImg/`} onClick={this.validCode}/>
              </ForItem>
              <ForItem>
                <Icon type="mobile"/>
                <Input placeholder="请输入您的验证码" className="ipt" {...phoneCodeProps}/>
                <a onClick={this.handleValide}>获取验证码</a>
              </ForItem>
              <ForItem>
                <Icon type="unlock"/>
                <Input type="password" placeholder="设置新密码" className="ipt" {...passwordProps} />
              </ForItem>
              <ForItem>
                <Icon type="unlock"/>
                <Input type="password" placeholder="再次确认密码" className="ipt" {...confirmPwdProps}/>
              </ForItem>
              <Row gutter={24}>
                <Col sm={12}>
                  <ForItem className="login-row">
                    <Button className="sign-button" type="primary" onClick={this.handleSubmit}>确认修改</Button>
                  </ForItem>
                </Col>
                <Col sm={12}>
                  <ForItem>
                    <Button className="forget-return" type="ghost" onClick={this.handleReturn}>返回</Button>
                  </ForItem>
                </Col>
              </Row>
            </Form>
          </section>
        </div>
      </div>
    );

  }
})
PassWord = createForm()(PassWord);
export default PassWord;